
import Taro, { Component } from '@tarojs/taro'
import { AtModal, AtCheckbox, AtList, AtListItem, AtActionSheet, AtActionSheetItem, AtModalContent, AtModalAction } from 'taro-ui'
import classnames from 'classnames'

import PropsType from 'prop-types'
import { View, Text, Button } from '@tarojs/components'
import commonUtils from '@/common/'
import "./index.scss";

// https://static.fotor.com.cn/assets/stickers/freelancer_lmf_0315_01/c9fe1862-3583-4884-8b6e-6d53c6a34142_medium_thumb.jpg
// https://image.16pic.com/00/10/27/16pic_1027103_s.jpg?imageView2/0/format/png

export default class DModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checkedPayType: ''
    }
  }
  onCancel() {
    this.setState({
      isShow: false
    }, () => {
    })
    this.props.isShow = false

    if (!this.state.checkedPayType) {
      return Taro.showToast({
        title: '请选择支付方式',
        icon: 'none',
        duration: 800
      })
    }
    this.props.onCancel && this.props.onCancel(this.state.checkedPayType)
  }
  handleClose() {
    this.setState({
      isShow: false
    }, () => {
    })
    this.props.isShow = false
    this.props.handleClose && this.props.handleClose(this.state.checkedPayType)
  }
  handleChangeYin(value = []) {
    if (!value.length) value = ['5']
    this.setState({
      JianHang: [],
      WeiXin: [],
      Yin: value,
      wxApplet: [],
      wei: [],
      checkedPayType: value[0]
    })
  }
  handleChangeJianHang(value = []) {
    if (!value.length) value = ['6']
    this.setState({
      Yin: [],
      WeiXin: [],
      JianHang: value,
      wxApplet: [],
      wei: [],
      checkedPayType: value[0]
    })
  }
  handleWxApplet(value = []) {
    if (!value.length) value = ['8']
    this.setState({
      Yin: [],
      WeiXin: [],
      JianHang: [],
      wei: [],
      wxApplet: value,
      checkedPayType: value[0]
    })
  }
  handleWeiXin(value = []) {
    if (!value.length) value = ['7']
    this.setState({
      Yin: [],
      JianHang: [],
      WeiXin: value,
      wxApplet: [],
      wei: [],
      checkedPayType: value[0]
    })
  }
  handleChange(value = []) {
    if(!value.length) value = ['1']
    this.setState({
     wei:value,
     Yin: [],
     JianHang: [],
     WeiXin: value,
     wxApplet: [],
     jian:[],
     YinLian:[],
     checkedPayType: value[0]
   })
   }

  render() {
    const { className } = this.props
    let { Yin, JianHang, wxApplet, WeiXin, wei } = this.state

    return (
      <View className={classnames('b_paymodal', className || true)}>
        <AtActionSheet isOpened={this.props.isShow} cancelText='确定支付' title='请选择支付方式' onCancel={this.onCancel.bind(this)} onClose={this.handleClose.bind(this)}>

          <AtActionSheetItem className='at-row' onClick={this.handleChangeYin.bind(this, ['5'])}>
            <AtList className='at-col'>
              <AtListItem
                title='银联在线'
                // arrow='right'
                thumb='https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1542549666,3757974473&fm=74&app=80&f=PNG'
              />
            </AtList>
            <AtCheckbox
              options={[{ value: '5' }]}
              selectedList={Yin}
              onChange={this.handleChangeYin.bind(this)}
            />
          </AtActionSheetItem>
          {/* <AtActionSheetItem className='at-row' onClick={this.handleChange.bind(this,['1'])}>
			      <AtList className='at-col'>
			        <AtListItem
			          title='微信支付'
			          // arrow='right'
			          thumb='https://static.fotor.com.cn/assets/stickers/freelancer_lmf_0315_01/c9fe1862-3583-4884-8b6e-6d53c6a34142_medium_thumb.jpg'
			        />
			      </AtList>
            <AtCheckbox
              options={[{value:'1'}]}
              selectedList={wei}
              onChange={this.handleChange.bind(this)}
            />
          </AtActionSheetItem> */}
          <AtActionSheetItem className='at-row' onClick={this.handleChangeJianHang.bind(this, ['6'])}>
            <AtList className='at-col'>
              <AtListItem
                title='建行支付'
                // arrow='right'
                thumb='https://image.16pic.com/00/10/27/16pic_1027103_s.jpg?imageView2/0/format/png'
              />
            </AtList>
            <AtCheckbox
              options={[{ value: '6' }]}
              selectedList={JianHang}
              onChange={this.handleChangeJianHang.bind(this)}
            />
          </AtActionSheetItem>

          {/*<AtActionSheetItem className='at-row' onClick={this.handleWeiXin.bind(this, ['7'])}>*/}
          {/*  <AtList className='at-col'>*/}
          {/*    <AtListItem*/}
          {/*      title='微信扫码'*/}
          {/*      // arrow='right'*/}
          {/*      thumb='https://static.fotor.com.cn/assets/stickers/freelancer_lmf_0315_01/c9fe1862-3583-4884-8b6e-6d53c6a34142_medium_thumb.jpg'*/}
          {/*    />*/}
          {/*  </AtList>*/}
          {/*  <AtCheckbox*/}
          {/*    options={[{ value: '7' }]}*/}
          {/*    selectedList={WeiXin}*/}
          {/*    onChange={this.handleWeiXin.bind(this)}*/}
          {/*  />*/}
          {/*</AtActionSheetItem>*/}

          <AtActionSheetItem className='at-row' onClick={this.handleWxApplet.bind(this, ['8'])}>
            <AtList className='at-col'>
              <AtListItem
                title='微信小程序支付'
                // arrow='right'
                thumb='https://static.fotor.com.cn/assets/stickers/freelancer_lmf_0315_01/c9fe1862-3583-4884-8b6e-6d53c6a34142_medium_thumb.jpg'
              />
            </AtList>
            <AtCheckbox
              options={[{ value: '8' }]}
              selectedList={wxApplet}
              onChange={this.handleWxApplet.bind(this)}
            />
          </AtActionSheetItem>

        </AtActionSheet>
      </View>
    )
  }
}

DModal.defaultProps = {
  className: '',
  isOpened: false,
  handleClose: () => { },
  onCancel: () => { },
  onLast: () => { }
}
DModal.PropsType = {
  className: PropsType.oneOfType[PropsType.string, PropsType.object],
  isOpened: PropsType.bool,
  handleClose: PropsType.fuc,
  onCancel: PropsType.fuc
}
